<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>移动</title>
		<style type="text/css">
			body{
				background-color: #DEB887;
			}
			#move{
				border-radius: 10px;
				text-align: center;
				padding-top: 3px;
				width: 100px;
				height: 100px;
				background-color: #F08080;
				/* 声明调用move动画 */
				animation: move 1s infinite alternate;
				/* 动画一定要设定一个坐标系*/
				position:relative;
				transition: 2s;
			}
			#move:hover{
				width: 500px;
				height: 500px;
			}
			/* 定义一个动画  */
			@keyframes move{
				from{
					top: 0px;
					left: 0px;
					transform: rotate(0deg) rotateX(0deg);
					
				}
				to{
					top: 600px;
					left: 600px;
					transform: rotate(360deg) rotateY(360deg);
				}
			}
		</style>
	</head>
	<body>
		<h3>移动动画效果</h3>
		<div id="move">
			
		</div>
	</body>
</html>
